<script setup>
import { reactive, ref } from "vue";

// 搜索的客户姓名
const customerName = ref("");
// 当前页
const pageNum = ref(1);
// 每页显示的数量
const pageSize = ref(5);
// 总条数
const total = ref(5)

const tableData = ref([
  {
    id: 1,
    startDate: "2023-11-23 00:00:00",
    endDate: "2025-12-31 00:00:00",
    bedDetails: "606#2018-1",
    customerName: "刘茂元",
    customerAge: 76,
    customerSex: 0,
  },
]);

import { findByBedDetailService } from "@/api/bedAPI.js";

const findByBedDetail = async () => {

  let params = {
    customerName: customerName.value ? customerName.value : null,
    pageNum : pageNum.value ? pageNum.value : 1,
    pageSize : pageSize.value ? pageSize.value : 5
  }

  const result = await findByBedDetailService(params);
  const pageBean = result.data;
  tableData.value =  pageBean.data;
  total.value = pageBean.total;
};

findByBedDetail();

// 搜索
const findByCustomerName = () => {
  findByBedDetail();
}

// 点击上一页下一页
const  handleCurrentChange = (num) => {
  pageNum.value = num;
  findByBedDetail();
}
// 修改每页显示的数量
const handleSizeChange = (size) => {
  pageSize.value = size;
  findByBedDetail();
}

</script>
<template>
  <div class="common-layout">
    <el-container>
      <Breadcrumb />
      <el-header>
        <div style="margin-top: 20px">
          <el-row :gutter="30">
            <el-col :span="5">
              <el-form-item label="姓名：">
                <el-input clearable v-model="customerName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                type="primary"
                @click="findByCustomerName"
                color="#337ab7"
                icon="Search"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-divider style="margin: 0"></el-divider>
      <el-main>
        <div>
          <el-row class="mb-4">
            <el-button
              :class="[{ activeBtn: btnFlag }]"
              style="border: 1px white solid; margin-left: 0px"
              @click="donging"
              >正在使用</el-button
            >
            <el-button
              :class="[{ activeBtn: !btnFlag }]"
              style="border: 1px white solid; margin-left: 0px"
              @click="history"
              >使用历史</el-button
            >
          </el-row>
        </div>
        <el-table :data="tableData" style="width: 100%; align: center">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            align="center"
            prop="customerName"
            label="客户姓名"
            width="180"
          />
          <el-table-column
            align="center"
            prop="customerSex"
            label="性别"
            width="180"
          >
            <template #default="scoped">{{
              scoped.row.customerSex == 0 ? "男" : "女"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="bedDetails"
            label="床位详情"
            width="180"
          />
          <el-table-column
            align="center"
            prop="startDate"
            label="床位使用起始日期"
            width="180"
          />
          <el-table-column
            align="center"
            prop="endDate"
            label="床位使用结束日期"
            width="180"
          />
          <el-table-column align="center" prop="name" label="操作" width="220">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="exchange(scope.row)"
                v-if="btnFlag"
              >
                床位调换
              </el-button>
              <el-button
                link
                type="primary"
                size="small"
                @click="editMessage(scope.row)"
                v-if="btnFlag"
                >修改</el-button
              >
              <el-button
                link
                type="danger"
                size="small"
                v-if="!btnFlag"
                @click="fundelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          size="small"
          background
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="prev, pager, next, sizes,jumper"
          :total="total"
          class="mt-4"
           @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-main>
    </el-container>
    <!-- 床位调换对话框 -->
    <el-dialog
      v-model="changeDialogVisible"
      title="床位调换"
      width="60%"
      align-center
      draggable
    >
      <el-divider border-style="double" style="margin: 0" />
      <el-form
        label-position="right"
        label-width="auto"
        style="max-width: 800px; margin: 20px auto"
        class="demo-form-inline"
        :inline="true"
        :model="exchangeData.exchangeForm"
        ref="exchangeForm"
      >
        <el-form-item label="客户姓名：" prop="customerName">
          <el-input readonly v-model="exchangeData.exchangeForm.customerName" />
        </el-form-item>
        <el-form-item label="旧床位详情" prop="bedDetails">
          <el-input readonly v-model="exchangeData.exchangeForm.bedDetails" />
        </el-form-item>

        <el-form-item label="性别：" prop="customerSex">
          <el-input
            readonly
            v-model="exchangeData.exchangeForm.customerSex"
            :value="exchangeData.exchangeForm.customerSex == 0 ? '男' : '女'"
          />
        </el-form-item>

        <el-form-item label="新楼号" prop="buildingNo">
          <el-input readonly v-model="exchangeData.exchangeForm.buildingNo" />
        </el-form-item>

        <!-- <el-form-item label="旧房间号" prop="oldRoomNo">
            <el-input readonly v-model="exchangeData.exchangeForm.oldRoomNo" />
          </el-form-item> -->
        <el-form-item label="楼层" prop="newRoomNo">
          <el-select
            v-model="exchangeData.exchangeForm.newRoomFloor"
            style="width: 200px"
            placeholder="请选择楼层"
            @change="getAllRoomsByFloor"
          >
            <el-option label="一楼" value="一楼"></el-option>
            <el-option label="二楼" value="二楼"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="旧房间号" prop="oldRoomNo">
            <el-input readonly v-model="exchangeData.exchangeForm.oldRoomNo" />
          </el-form-item> -->
        <el-form-item label="新房号" prop="newRoomNo">
          <el-select
            v-model="exchangeData.exchangeForm.newRoomNo"
            style="width: 200px"
            placeholder="请选择房间号"
            @change="getBed"
          >
            <el-option
              v-for="item in roomList"
              :key="item.roomNo"
              :label="item.roomNo"
              :value="item.roomNo"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="当前床位使用起始日期：" prop="startDate">
          <el-date-picker
            v-model="exchangeData.exchangeForm.startDate"
            style="width: 200px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="新床号" prop="newBedId">
          <el-select
            style="width: 200px"
            v-model="exchangeData.exchangeForm.newBedId"
            placeholder="请选择床位"
          >
            <el-option
              ref="bedlist"
              v-for="item in bedList"
              :key="item.bedNo"
              :label="item.bedNo"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前床位使用结束时间：" prop="endDate">
          <el-date-picker
            v-model="exchangeData.exchangeForm.endDate"
            style="width: 200px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-divider border-style="double" style="margin: 0" />
      <template #footer>
        <span class="dialog-footer" style="padding-top: 0px">
          <el-button type="primary" @click="exchangeSave">保存</el-button>
          <el-button @click="changeDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      v-model="updateDialogVisible"
      title="信息修改"
      width="60%"
      align-center
      draggable
    >
      <el-divider border-style="double" style="margin: 0" />
      <el-form
        label-position="right"
        label-width="auto"
        style="max-width: 800px; margin: 20px auto"
        class="demo-form-inline"
        :inline="true"
        :model="edit.bedDetalsForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="客户姓名：" prop="customerName">
          <el-input v-model="edit.bedDetalsForm.customerName" />
        </el-form-item>
        <el-form-item label="性别：" prop="customerSex">
          <el-input
            readonly
            v-model="edit.bedDetalsForm.customerSex"
            :value="edit.bedDetalsForm.customerSex == 0 ? '男' : '女'"
          />
        </el-form-item>
        <!-- <el-form-item label="房间号：" prop="roomNo">
            <el-input readonly v-model="edit.bedDetalsForm.roomNo" />
          </el-form-item> -->

        <el-form-item label="床位详情： " prop="bedDetails">
          <el-input readonly v-model="edit.bedDetalsForm.bedDetails" />
        </el-form-item>

        <el-form-item label="床位使用起始日期：" prop="startDate">
          <el-input readonly v-model="edit.bedDetalsForm.startDate" />
        </el-form-item>

        <el-form-item label="床位使用结束日期： " prop="endDate">
          <el-date-picker
            v-model="edit.bedDetalsForm.endDate"
            style="width: 200px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-divider border-style="double" style="margin: 0" />
      <template #footer>
        <span class="dialog-footer" style="padding-top: 0px">
          <el-button type="primary" @click="editSave('editForm')"
            >保存</el-button
          >
          <el-button @click="editCancel">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <!--删除提示框-->
    <el-dialog
      v-model="delDialogVisible"
      title="温馨提示"
      width="500"
      :before-close="handleClose"
    >
      <span>您确定要删除吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteHistory"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.activeBtn {
  color: #1890ff;
  background: rgb(232, 244, 255);
}
</style>
